<keira-top-bar [selected]="handlerService.selected" [selectedName]="handlerService.selectedName" [isNew]="handlerService.isNew" />
<div class="container-fluid">
  <div class="content-block">
    <p class="h5 mb-3">Help us improving this feature</p>

    <p>
      There are a few things needed to make this feature more complete and user-friendly, more info at
      <a target="_blank" href="https://github.com/azerothcore/Keira3/issues/1190">this page</a>.
    </p>
  </div>
  <div class="content-block">
    <p class="h5 mb-3">HEADS UP: this is how the spell_dbc table works</p>

    <p>The <i>spell_dbc</i> table contains mostly overrides of the spells located in the Client DBC files.</p>
    <p>
      <strong>IMPORTANT:</strong> only a subset of the spells from the DBC are present in the <i>spell_dbc</i> table, if you want to add new
      overrides, follow <a target="_blank" href="https://www.azerothcore.org/wiki/importing-spell-dbc">THIS HOW-TO</a>.
    </p>
  </div>
  <div class="content-block">
    <keira-create
      [entityTable]="entityTable"
      [entityIdField]="entityIdField"
      [customStartingId]="customStartingId"
      [handlerService]="handlerService"
      [queryService]="queryService"
    />
  </div>
  <div class="content-block">
    <p class="lead" [translate]="'SELECT_EXISTING'"></p>
    <form [formGroup]="selectService.queryForm" class="mb-2">
      <div class="row">
        <ng-container [formGroup]="selectService.fields">
          <div class="form-group col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <input
              [formControlName]="SPELL_DBC_ID"
              type="number"
              class="form-control form-control-sm"
              id="search-id"
              [placeholder]="SPELL_DBC_ID"
            />
          </div>
          <div class="form-group col-sm-6 col-md-4 col-lg-3 col-xl-3">
            <input [formControlName]="SPELL_DBC_NAME" class="form-control form-control-sm" id="name" [placeholder]="SPELL_DBC_NAME" />
          </div>
        </ng-container>
        <div class="form-group col-sm-6 col-md-4 col-lg-3 col-xl-2">
          <input [formControlName]="'limit'" class="form-control form-control-sm" id="limit" placeholder="Limit" />
        </div>
        <div class="mb-2 col-sm-6 col-md-4 col-lg-3 col-xl-2">
          <button id="search-btn" class="btn btn-primary btn-sm" [disabled]="selectService.queryForm.invalid" (click)="onSearch()">
            <i class="fa fa-search"></i> {{ 'SEARCH' | translate }}
          </button>
        </div>
      </div>
      <keira-highlightjs-wrapper [code]="selectService.query" />
    </form>
    @if (selectService.rows) {
      <div class="content-block">
        <ngx-datatable
          class="bootstrap table table-flex text-center datatable-select"
          [rows]="selectService.rows"
          [headerHeight]="DTCFG.headerHeight"
          [footerHeight]="DTCFG.footerHeight"
          [columnMode]="DTCFG.columnMode"
          [rowHeight]="30"
          [limit]="DTCFG.limit"
          [selectionType]="DTCFG.selectionType"
          (select)="selectService.onSelect($event)"
        >
          <ngx-datatable-column [name]="SPELL_DBC_ID" [prop]="SPELL_DBC_ID" [minWidth]="150">
            <ng-template let-row="row" ngx-datatable-cell-template>
              <keira-icon size="small" [spellId]="row[SPELL_DBC_ID]" /> {{ row[SPELL_DBC_ID] }}
            </ng-template>
          </ngx-datatable-column>
          <ngx-datatable-column [name]="SPELL_DBC_NAME" [prop]="SPELL_DBC_NAME" [minWidth]="250"></ngx-datatable-column>
          <ngx-datatable-column name="NameSubtext_Lang_enUS(Ranks)" [prop]="SPELL_DBC_NAMESUBTEXT" [minWidth]="250"></ngx-datatable-column>
          <ngx-datatable-column [name]="SPELL_DBC_DESCRIPTION" [prop]="SPELL_DBC_DESCRIPTION" [minWidth]="900"></ngx-datatable-column>
        </ngx-datatable>
      </div>
    }
  </div>
</div>
